/*
 * @Date: 2022-05-20 10:01:25
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-05-20 13:37:17
 * @FilePath: \my-react-components\src\component\Menu\MenuItem.tsx
 * @Description: MenuItem
 */
import React, { memo, useContext } from "react";
import classNames from "classnames";
import { menuContext } from ".";
export interface MenuItemProps {
  index?: string;
  disabled?: boolean;
  className?: string;
  style?: React.CSSProperties;
  children?: React.ReactNode;
}
const MenuItem: React.FC<MenuItemProps> = memo(
  ({ index, disabled, className, style, children }) => {
    const context = useContext(menuContext);
    const classes = classNames("menu-item", className, {
      "is-disabled": disabled,
      "is-active": context.index === index,
    });
    const handleClick = () => {
      if (context.onSelect && !disabled && typeof index === "string") {
        context.onSelect(index);
      }
    };
    return (
      <li className={classes} style={style} onClick={handleClick}>
        {children}
      </li>
    );
  },
);
//限定Menu中children只能为MenuItem
MenuItem.displayName = "MenuItem";
export default MenuItem;
